<template>
  <mu-container
    class="button-wrapper"
    style="padding: 5px 8px;text-align: center;"
  >
    <mu-button fab small color="error" @click="clearAll">
      <mu-icon value="delete_sweep"></mu-icon>
    </mu-button>
    <mu-button
      :disabled="undoList.length === 0"
      fab
      small
      color="primary"
      @click="undo"
    >
      <mu-icon value="undo"></mu-icon>
    </mu-button>
    <mu-button
      :disabled="redoList.length === 0"
      fab
      small
      color="primary"
      @click="redo"
    >
      <mu-icon value="redo"></mu-icon>
    </mu-button>
    <mu-button fab small color="success" @click="preview">
      <mu-icon value="remove_red_eye"></mu-icon>
    </mu-button>
    <mu-button
      fab
      small
      color="success"
      @click="$store.dispatch('align', 'left');"
    >
      左
    </mu-button>
    <mu-button
      fab
      small
      color="success"
      @click="$store.dispatch('align', 'right');"
    >
      右
    </mu-button>
    <mu-button
      fab
      small
      color="success"
      @click="$store.dispatch('align', 'top');"
    >
      上
    </mu-button>
    <mu-button
      fab
      small
      color="success"
      @click="$store.dispatch('align', 'bottom');"
    >
      下
    </mu-button>
    <mu-button
      fab
      small
      color="success"
      @click="$store.dispatch('align', 'horizontalC');"
    >
      水平
    </mu-button>
    <mu-button
      fab
      small
      color="success"
      @click="$store.dispatch('align', 'verticalC');"
    >
      垂直
    </mu-button>
    <mu-button
      fab
      small
      color="success"
      @click="$store.dispatch('align', 'horizontalA');"
    >
      水平1
    </mu-button>
    <mu-button
      fab
      small
      color="success"
      @click="$store.dispatch('align', 'verticalA');"
    >
      垂直2
    </mu-button>
    <mu-button fab small color="success" @click="group();"> 组合 </mu-button>
    <mu-button fab small color="success" @click="ungroup();"> 解散 </mu-button>
    <mu-button fab small color="success" @click="unselect();">
      取消选择
    </mu-button>
    <mu-button fab small color="success" @click="select();"> 全选 </mu-button>
    <mu-button fab small color="success" @click="copy();"> 复制 </mu-button>
    <mu-button fab small color="success" @click="paste();"> 粘贴 </mu-button>
    <mu-button
      fab
      small
      color="success"
      @click="f$store.dispatch('font', '仓耳小方体 W01');"
    >
      字体
    </mu-button>
    <mu-button
      fab
      small
      color="success"
      @click="$store.dispatch('font', 'TsangerAMXK W01');"
    >
      字体
    </mu-button>
  </mu-container>
</template>

<script>
import { mapGetters, mapActions } from "vuex";

export default {
  name: "TopHeader",
  data() {
    return {};
  },
  computed: {
    ...mapGetters(["canvas", "undoList", "redoList"])
  },
  created() {},
  methods: {
    ...mapActions([
      "undo",
      "redo",
      "setPreviewImg",
      "saveState",
      "group",
      "ungroup",
      "unselect",
      "select",
      "copy",
      "paste"
    ]),

    //清理数据
    clearAll() {
      const canvas = this.canvas;
      if (!canvas) return;
      // canvas.clear()
      canvas.set({
        backgroundColor: "#fff"
      });
      canvas
        .getObjects()
        .slice()
        .forEach(obj => {
          canvas.remove(obj);
        });
    },

    //预览
    preview() {
      const canvas = this.canvas;
      if (!canvas) return;
      //   console.log(
      //     canvas.toDataURL({
      //       multiplier: 1,
      //       format: "jpeg"
      //     })
      //   );

      //console.log(canvas);

      let bg = canvas.getObjects("_lxw_bg")[0];
      console.log(canvas.viewportTransform);

      const result = canvas.toDataURL({
        multiplier: 1 / canvas.getZoom(),
        quality: 1,
        format: "jpeg",

        width: bg.width * canvas.getZoom(),
        height: bg.height * canvas.getZoom(),
        left: canvas.viewportTransform[4] + bg.left * canvas.getZoom(),
        top: canvas.viewportTransform[5] + bg.top * canvas.getZoom()
        // left: bg.left * canvas.getZoom(),
        // top: bg.top * canvas.getZoom()
      });

      const tempCanvas = new fabric.Canvas();
      tempCanvas.setWidth(bg.width);
      tempCanvas.setHeight(bg.height);

      console.log(canvas.toJSON());
      //加载
      tempCanvas.loadFromJSON(canvas.toJSON(), () => {
        console.log("加载成功!!");
        tempCanvas.renderAll();

        console.log(
          canvas.viewportTransform[4] + bg.left * canvas.getZoom(),
          canvas.viewportTransform[5] + bg.top * canvas.getZoom(),
          tempCanvas.toSVG()
        );
      });
      //平移视图
      tempCanvas.viewportTransform = [1, 0, 0, 1, -bg.left, -bg.top];
      //缩放移动视图，使其适应Canvas大小
      function zoomToFitCanvas() {
        //遍历所有对对象，获取最小坐标，最大坐标
        var objects = canvas.getObjects();
        if (objects.length > 0) {
          var rect = objects[0].getBoundingRect();
          var minX = rect.left;
          var minY = rect.top;
          var maxX = rect.left + rect.width;
          var maxY = rect.top + rect.height;
          for (var i = 1; i < objects.length; i++) {
            rect = objects[i].getBoundingRect();
            minX = Math.min(minX, rect.left);
            minY = Math.min(minY, rect.top);
            maxX = Math.max(maxX, rect.left + rect.width);
            maxY = Math.max(maxY, rect.top + rect.height);
          }
        }

        //计算平移坐标
        var panX = (maxX - minX - canvas.width) / 2 + minX;
        var panY = (maxY - minY - canvas.height) / 2 + minY;
        //开始平移
        canvas.absolutePan({ x: panX, y: panY });

        //计算缩放比例
        var zoom = Math.min(
          canvas.width / (maxX - minX),
          canvas.height / (maxY - minY)
        );
        //计算缩放中心
        var zoomPoint = new fabric.Point(canvas.width / 2, canvas.height / 2);
        //开始缩放
        canvas.zoomToPoint(zoomPoint, zoom);
      }

      //   console.log(
      //     canvas.viewportTransform[4] + bg.left * canvas.getZoom(),
      //     canvas.viewportTransform[5] + bg.top * canvas.getZoom(),
      //     tempCanvas.toSVG()
      //   );

      //const element = document.getElementById("#canvas");
      //   doc
      //     .svg(canvas.toSVG(), {
      //       x: 0,
      //       y: 0,
      //       width: 600,
      //       height: 800
      //     })
      //     .then(() => {
      //       // save the created pdf
      //       doc.save("myPDF.pdf");
      //     });
      //SVGtoPDF(canvas.toSVG(), x, y, options);

      //   kendo.drawing
      //     .drawDOM("#canvas", {
      //       forcePageBreak: ".page-break",
      //       paperSize: "A4",
      //       margin: { top: "1cm", bottom: "1cm" },
      //       scale: 0.8,
      //       height: 500,
      //       //template: $("#page-template").html(),
      //       keepTogether: ".prevent-split"
      //     })
      //     .then(function(group) {
      //       kendo.drawing.pdf.saveAs(group, "Exported_Itinerary.pdf");
      //     });

      //window.open(result);

      this.setPreviewImg(result);
      // this.$router.push({
      //    path: "preview"
      //  });
    }
  }
};
</script>

<style scoped></style>
